<template>
  <!--  巡检计划  -->
  <div class="app-container">
    <el-card class="dis">
      <el-form :inline="true" :model="formInline" class="formHeight">
        <el-form-item label="">
          <el-input v-model="formInline.keyword" size="mini" placeholder="关键字：计划标题" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>

          <el-button type="primary" size="mini" @click="edit()">新增</el-button>

        </el-form-item>
      </el-form>
    </el-card>
    <!--  列表  -->
    <el-card class="mt20">
      <el-button style="float:left;margin-bottom:10px" type="primary" @click="exportExcelSelect" size="mini">导出</el-button>
      <el-table
        :data="tableData"
        style="width: 100%;"
        class="tHeight"
        size="mini"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          property="spec_num"
          label="编号"
          align="center"
           width="150"
        />
        <el-table-column
          property="site_name"
          label="站点"
          align="center"
           width="100"
        />
        <el-table-column
          property="plan_title"
          label="计划标题"
          align="center"

        />
        <el-table-column
          property="plan_content"
          label="计划内容"
          align="center"

        />
        <el-table-column
          property="plan_cycle_string"
          label="计划周期"
          align="center"
            width="70"
        />
        <el-table-column
          property="plan_start"
          label="开始时间"
          align="center"
           width="120"
        />
        <el-table-column
          property="plan_end"
          label="结束时间"
          align="center"
          width="120"
        />
        <el-table-column
          property="user_name"
          label="创建人"
          align="center"
            width="90"
        />
        <el-table-column
          property="updated_at"
          label="创建时间"
          align="center"
          width="150"
        />
        <el-table-column

          label="附件"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="addOrEdit(2, scope.row.id)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
         <el-table-column
          label="操作"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">

            <el-button
              size="mini"
              type="primary"
              @click="edites(scope.row.id)"
            >修改</el-button>
            <el-button
              size="mini"
              type="primary"
             @click="dels(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--   分页   -->
<!--      <el-pagination-->
<!--        style="float: right;"-->
<!--        :page-size="10"-->
<!--        :current-page="formInline.offset"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        :total="total"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
      <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='formInline.offset' :limit.sync='formInline.limit' @pagination='getList' />
    </el-card>
    <!-- 详情组件 -->
    <div v-if="detailFlag">
      <Detail
        :id="detailId"
        :dialog-visible="detailFlag"
        :title="detailTitle"
        @close="close"
        @confirm="confirm"
      />
    </div>
    <!-- 导出组件 -->
    <ExportFile
      ref="myChild"
      :export-excel-info="exportExcelInfo"
      :table-data="tableAllData"
      :export-excel-arry="exportExcelArry"
    />
    <!-- 引入的详情弹窗组件 ref 为js中引用的名称 -->
    <inspection-plan-edit :details="details" :titles="tits" ref="inspectionPlanEdit" @getList="getList" ></inspection-plan-edit>
  </div>
</template>

<script>
import { planList ,delsPlan,detailesPlan } from '@/api/operations'
import Detail from './components/detail'
import ExportFile from '@/components/exportFile/index'
import InspectionPlanEdit from '@/views/operations/inspection/plan/components/edit'
export default {
  name: 'index',
  components: {
    InspectionPlanEdit,
    Detail,
    ExportFile
  },
  data() {
    return {
      tits:'',
      dialogVisible: false, // 新增编辑弹窗
      multipleSelection: [], // 表格选中数据
      // 导出配置数据
      exportExcelArry: [{
        prop: 'spec_num',
        label: '编号',
        formatterFlag: false
      }, {
        prop: 'site_name',
        label: '站点',
        formatterFlag: false
      }, {
        prop: 'plan_title',
        label: '计划标题',
        formatterFlag: false
      }, {
        prop: 'plan_content',
        label: '计划内容',
        formatterFlag: false
      }, {
        prop: 'plan_cycle',
        label: '计划周期',
        formatterFlag: true,
        formatterType: 'common-type',
        formatterInfo: [{ value: 1, label: '单次' }, { value: 2, label: '每周' }, { value: 3, label: '每月' }]
      }, {
        prop: 'plan_start',
        label: '开始时间',
        formatterFlag: false
      }, {
        prop: 'plan_end',
        label: '结束时间',
        formatterFlag: false
      }, {
        prop: 'user_name',
        label: '创建人',
        formatterFlag: false
      }, {
        prop: 'updated_at',
        label: '创建时间',
        formatterFlag: false
      }],
      // 导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: 'record-table',
        excelName: '巡检计划.xlsx'
      },
      // 需要导出的table数据
      tableAllData: [],
      detailId: 0, // 修改详情id
      detailFlag: false, // 详情弹窗标识
      detailTitle: '新增', // 弹窗标识
      tableData: [], // 列表数据
      total: 0, // 数据总条数
      // 搜索表单
      formInline: {
        offset: 1,
        limit: 10,
        plan_type: 1,
        keyword: ''
      },
      details:''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    exportExcelSelect() {
      if (this.multipleSelection.length === 0) {
        this.tableAllData = this.tableData
      } else {
        this.tableAllData = this.multipleSelection
      }
      // // 将选中项传给this. tableAllData
      // this.tableAllData = this.selectListArry
      // 需要延时调导出方法，为了等待数据初始化到列表中
      setTimeout(() => {
        this.$refs.myChild.exportExcel()
      }, 500)
    },
    exportExcel() {
      this.initData('export-excel')
      // 获取到表格数据的值并赋给this.tableAllData
      // 同样延时调导出方法，需在initData('export-excel')方法执行成功后调this.$refs.myChild.exportExcel();方法
    },
    getList() {
      planList(this.formInline).then(res => {
        this.tableData = res.data.plans
        this.total = res.data.total
      })
    },
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.formInline.offset = 0
      this.getList()
    },
    /**
     * @description: 新增或编辑
     * @author: 书童
     * @param: 1新增，2编辑
     */
    addOrEdit(num, id) {
      if (num === 1) {
        this.detailTitle = '新增'
        this.detailFlag = true
      } else {
        this.detailTitle = '附件'
        this.detailId = id
        this.detailFlag = true
      }
    },
    /**
     * @description: 排序
     * @author: 书童
     * 这个页面不用排序
     */
    // tableSortChange(column) {
    //   this.formInline.order = column.order ? column.order : 'descending'
    //   this.formInline.sort = column.prop
    //   this.formInline.offset = 0
    //   this.getList()
    // },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    // 删除
    dels(num){
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delsPlan({id:num}).then(res=>{
         this.getList()

      })

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

    },

    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = ''
    },
    closeE() {
      this.dialogVisible = false
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
  // 新增
    edit(row) {
      //this.dialogVisible = true
      this.tits='新增'
      this.details={}
      this.$refs.inspectionPlanEdit.open();
    },
      // 编辑
  edites(num){
     this.tits='编辑'
    detailesPlan({id:num}).then(res=>{
      this.details=res.data
      if(this.details.length!==0){
    this.$refs.inspectionPlanEdit.open();

      }

    })
  },
  }
}
</script>

<style lang="scss" scoped>
  .dis{
    display: flex;
    justify-content: flex-start;
  }
  .formHeight{
    height: 40px;
  }
  .mt20{
    margin-top: 20px;
  }
  .tHeight{
    /*height: calc(100vh - 350px);*/
    overflow: auto;
  }
</style>
